<template>
  <div id="tsl-mhis" style="width:800px; height:600px;"></div>
</template>

<script>
export default {
  methods: {
    tsl() {
      var myChart = this.$echarts.init(document.getElementById('tsl-mhis'));
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          right: '30px'
        },
        title: {
            text: '特斯拉Model Y',
            left: 'center',
            textStyle: {
              color: 'white'
            },
          },
          textStyle: {
            color: 'white'
          },
           tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
           legend: {
            left: '30',
            textStyle: {
              color: "white"
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['外观', '内饰', '配置', '空间', '舒适性', '操控', '动力']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '优秀',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: [724,488,649,756,178,292,299],
              label: {
                show: true,
                position: 'top',
                fontWeight: "bold",
                color: 'white'
              },
            },
            {
              name: '良好',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: [78,278,147,54,104,12,4],
              label: {
                show: true,
                position: 'top',
                fontWeight: "bold",
                color: 'orange'
              },
            },
            {
              name: '一般',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: [17,41,17,9,19,0,1],
              label: {
                show: true,
                position: 'top',
                fontWeight: "bold",
                color: 'yellow'
              },
            },
            {
              name: '较差',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: [0,12,6,0,518,515,515],
              label: {
                show: true,
                position: 'top',
                fontWeight: "bold",
                color: 'pink'
              },
            },

          ]
        };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.tsl()
  },
}
</script>

<style>

</style>